<!-- 业务类型入案、出案 -->
<template>
  <div id="xm-block-money-bar"></div>
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  amounts: {
    type: Array,
    default() {
      return [];
    }
  },
  ysf: {
    type: Array,
    default() {
      return [];
    }
  },
  ywlx: {
    type: Array,
    default() {
      return [];
    }
  },
});

const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        show: true,
        interval: 0,
        width: 30,
        overflow: "breakAll"
      },
      data: ['测图', '放线', '验收', '技术审查', '权籍调查', '勘测定界', '年份核查', '树木调查', '违章测量', '套图'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '万元',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value}'
      }
    },
  ],
  series: [
    {
      name: '拟收费',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      data: []
    },
    {
      name: '已收费',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      data: []
    }
  ]
});
let myChart = null;

watch(() => props, () => {
  option.xAxis[0].data = props.ywlx;
  option.series[0].data = props.amounts;
  option.series[1].data = props.ysf;
  myChart.setOption(option);
}, { deep: true })

onMounted(() => {
  myChart = echarts.init(document.getElementById('xm-block-money-bar'));
  myChart.setOption(option);
});
</script>

<style scoped></style>
